<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>ecology工具</title>
    	<link rel="stylesheet" type="text/css" href="/mobile/plugin/westvalley/common/plugin/iview/iview.css">
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/vue/vue.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/iview/iview.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/jQuery/jquery.min.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/tools/js/init.js"></script>
	    <style type="text/css">
	    	html,body{
				height: 100%;
				background: #f5f7f9;
			}
	    	.layout{
	    		width: 100%;
	    		height: 100%;
		        border: 1px solid #d7dde4;
		        background: #f5f7f9;
		        position: relative;
		        border-radius: 4px;
		        overflow: hidden;
		    }
		    .layout-breadcrumb{
		        padding: 10px 15px 0;
		    }
		    .layout-ceiling-main{
        		float: right;
    		}
		    .layout-content{
		    	height: 88%;
		        margin: 15px;
		        overflow: hidden;
		        background: #fff;
		        border-radius: 4px;
		    }
		    .layout-content-main{
		        padding: 10px 10px 10px 10px;
		        height: 100%;
		    }
		    .layout-content-main iframe{
		    	width: 100%;
		    	height: 100%;
		    }
		    .layout-copy{
		    	width: 100%;
		        text-align: center;
		        padding: 10px 0 20px;
		        color: #9ea7b4;
		    }
		    .layout-row{
		       height: 97%; 
		    }
		    .layout-row2{
		       height: 3%;
		    }
		    .layout-menu-left{
		        background: #464c5b;
		    }
		    .layout-header{
		        height: 60px;
		        background: #fff;
		        box-shadow: 0 1px 1px rgba(0,0,0,.1);
		    }
		    .layout-logo-left{
		        width: 90%;
		        height: 30px;
		        background: #5b6270;
		        border-radius: 3px;
		        margin: 15px auto;
		    }
		    .layout-ceiling-main a{
		        color: #9ba7b5;
		    }
		    .layout-hide-text .layout-text{
		        display: none;
		    }
		    .ivu-col{
		        transition: width .2s ease-in-out;
		    }
	    </style>
	</head>
	<body>
		<div id="app" class="layout" :class="{'layout-hide-text': spanLeft < 3}">
	        <Row type="flex" class="layout-row">
	            <i-col :span="spanLeft" class="layout-menu-left">
	                <i-menu ref="leftMenu" :active-name="currentActiveMenu" theme="dark" width="auto"  @on-select="selectMenuItem">
	                    <div class="layout-logo-left"></div>
	                    <Menu-Item v-for="(menu,index) in menus" :name="index">
	                        <Icon :type="menu.icon" size="24"></Icon>
	                        <span class="layout-text">{{menu.title}}</span>
	                    </Menu-Item>
	                </i-menu>
	            </i-col>
	            <i-col :span="spanRight">
	                <div class="layout-header">
	                    <i-button type="text" @click="toggleClick">
	                        <Icon type="navicon" size="32"></Icon>
	                    </i-button>
	                    <div class="layout-ceiling-main" v-show="loginUser">
			                <i-menu mode="horizontal" theme="primary" >
			                	<Submenu name="person">
			                		<template slot="title">
                						<Icon type="person"></Icon>
                						<span>{{loginUser.name}}</span>
            						</template>
	                        		<Menu-Item name="date">
	                        			<Icon type="calendar"></Icon>
	                        			<span>{{currentDate}}</span>
	                        		</Menu-Item>
	                        		<Menu-Item name="time">
										<Icon type="clock"></Icon>
										<span>{{currentTime}}</span>
	                        		</Menu-Item>
			                	</Submenu>
			                </i-menu>
            			</div>
	                </div>
	                <div class="layout-breadcrumb">
	                    <Breadcrumb>
	                        <Breadcrumb-Item v-if="currentMenu">
	                        	<Icon :type="currentMenu.icon" size="16"></Icon>
	                        	<span>{{currentMenu.title}}</span>
	                        </Breadcrumb-Item>
	                    </Breadcrumb>
	                </div>
	                <div class="layout-content">
	                    <div class="layout-content-main">
	                    	<iframe v-if="currentMenu" :src="currentMenu.url" scrolling="auto" frameborder="no" seamless></iframe>
	                    </div>
	                </div>
	            </i-col>
	        </Row>
	        <Row type="flex" class="layout-row2">
	        	<i-col :span="spanLeft" class="layout-menu-left"></i-col>
	        	<i-col :span="spanRight">
	        		<div class="layout-copy">
	                    2011-2017 &copy; mos
	                </div>
	        	</i-col>
	        </Row>
	    </div>
	</body>
</html>